<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="baselayout/import.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="${staticPath}/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="${staticPath}/assets/css/wexp.css">
<%-- <script src="${staticPath}/assets/angularjs/angular.js"></script> --%>
<style>
.container-fluid{
min-height:100%;
}
</style>
</head>

<body>
	<script>
		!(function(w, window) {
			//private 
			'use strict'
			function WebContent(obj){
				this.id = obj.id;
				this.date = obj.date;
				this.content = obj.content;
				this.source = obj.source;
				this.url = obj.url
				this.title = obj.title;
			}
			var wechatText = []
			var webText = []
			var currentText = null;
			var stepNames = [ "数据采集", "文本过滤", "文本分词", "向量空间模型", "文本分类", "用户兴趣" ]
			var subStepName = [ 
			                    [ "抓取网页" ], 
			                    [ "获取数据", "过滤" ],
								[ "获取数据", "分词" ],
								[ "处理训练集", "查看类标", "查看特征词", "查看训练集" ],
								[ "归一化", "查看模型", "输入待分类文本","文本分类" ],
								[ "用户兴趣" ] 
			                  ]
			var subStepNum = subStepName.map(function(x){return x.length});
			var hasDone = new Array(subStepNum.length);
			var setCheck = function(step, idx) {
				if (step >= hasDone.length)
					return;
				if (idx >= hasDone[step].length)
					return;
				hasDone[step][idx] = true;
				//加页面对号
				return;
			}
			var showPreStepName = function(step) {
				return stepNames[step - 1];
			}
			var setGlobalText = function(text) {
				globalText = text;
			}
			//public method
			w.reset = function() {
				for ( var i in stepNames) {
					hasDone[i] = new Array();
					for (var j = 0; j < subStepNum[i]; j++) {
						hasDone[i][j] = false;
					}
				}
			}
			w.checkBefore = function(idx, sub) {
				for (var j = 0; j < idx; j++) {
					if (hasDone[j].filter(function(x) {
						return x;
					}).length != hasDone[j].length) {
						return false;
					}
				}
				var cur = hasDone[idx];
				for (var j = 0; j < sub; j++) {
					if (!cur[j])
						return false;
				}
				setCheck(idx, sub)
				return true;
			}
			var checkBefore = w.checkBefore;
			w.beforeNotFinish = function(step, sub) {
				var name = showPreStepName(step);
				sub = sub - 1;
				if (sub < 0) {
					step = step-1;
					sub = hasDone[step - 1].length - 1;
				}
				var tip = '<h4>请先完成上一模块[' + name + ']操作中的['
						+ subStepName[step][sub] + ']</h4>';
				$('#myTip').on('show.bs.modal', function() {
					$('.modal-content', this).html(tip);
				})
				$('#myTip').modal('show')
			}
			var beforeNotFinish = w.beforeNotFinish;
			w.showStatusWorkbench = function() {
				$('#myModal')
						.on(
								'shown.bs.modal',
								function(e) {
									var bodydiv = $(".modal-body", this)
									bodydiv.children().remove();
									var index = 0;
									var divs = stepNames.map(function(stepName) {
												var containerDiv = $("<div class='clearfix'></div>");
												var header = $("<p class='h4'></p>").html(stepName)
												containerDiv.append(header);
												var subidx = 0;
												var subdivs = subStepName[index].map(function(name) {
															var subdiv = $(
																	"<p style='float:left;margin-right:20px'></p>")
																	.html(name);
															subdiv.append(hasDone[index][subidx] ? "<span class='glyphicon glyphicon-ok'></span>"
																			: "<span class='glyphicon glyphicon-remove'></span>");
															subidx++;
															return subdiv
														})
												$.each(subdivs, function() {
													containerDiv
															.append($(this))
												})
												index++;
												return containerDiv
											})
									$.each(divs, function() {
										bodydiv.append($(this))
									})
									/* 计算进度条 */
									var progressbar = $(".progress-bar");
									var totalsteps = subStepName.map(
											function(arr) {
												return arr.length
											}).reduce(function(x, y) {
										return x + y
									})
									var currentsteps = hasDone.map(
											function(arr) {
												return arr.filter(function(x) {
													return x;
												}).length
											}).reduce(function(x, y) {
										return x + y
									});
									var ratio = (currentsteps / totalsteps) * 100;
									progressbar.css("width", ratio + '%');

								})
				$("#myModal").modal('show')
			}

			w.getGlobalText = function() {
				return globalText
			}
			//getDoc 与 crawl是从服务器获取数据,不同的是getDoc目前返回一条微信数据,crawl返回多条抓取数据
			w.getDoc = function(elemid, p1, p2) {
				if (checkBefore(p1, p2)) {
					var url = "../wechatlab/get.do";
					var seq = parseInt(Math.random() * 10000);
					$.ajax({
						url : url,
						data : {
							"id" : seq
						},
						success : function(data) {
							wechatText = $.parseJSON(data).map(function(x){return new WebContent(x)});
							currentText = wechatText[0];
							$('#' + elemid).html(currentText.content);
						}
					})
				} else {
					beforeNotFinish(p1, p2);
				}
			}
			w.crawl = function(elemid, step, seq) {
				if (checkBefore(step, seq)) {
					var url = "../web/getWebContent.do"
					$.ajax({
						url : url,
						success : function(data) {
							webText = $.parseJSON(data).map(function(x){return new WebContent(x)});
							/* var str = "";
							for (var i = 0; i < numText; i++) {
								str += globalText[i].content;
							} */
							currentText = webText[0]
							$("#" + elemid).val(currentText.content);
						}
					})
				}
			}
			
			w.crawlData = function(elemid, p1, p2) {
				if (checkBefore(p1, p2)) {
					/* var str = ""
					for (var i = 0; i < numText; i++) {
						str += globalText[i].content;
					} */
					currentText = webText[0];
					$('#' + elemid).html(currentText.content);
				} else {
					beforeNotFinish(p1, p2);
				}
			}

			w.cls = function(id) {
				var ele = $('#'+id);
				if(ele[0].tagName.toUpperCase() == "TEXTAREA"){
					ele.val("");
				}else{
					ele.html("");	
				}
				
			}
			w.reset();
			w.debug = function() {
				console.log(hasDone);
				for(var i=0;i<hasDone.length;i++){
					for(var j =0;j<hasDone[i].length;j++){
						hasDone[i][j] = true;
					}
				}
				
				
			}
			w.classifyText = function(elemid,p1,p2){
				if(checkBefore(p1,p2)){				
					var url = "./classify.do"
					var localdata = Array(currentText.content);
					var data = localdata.map(function(x){
						return JSON.stringify(x)
					}).map(function(x){
						return "srcText="+x;
					})
					var str = data.join("&");
					$.ajax({
						url : url,
						type:'POST',
						contentType: "application/x-www-form-urlencoded; charset=utf-8",
						data:str,
						success : function(data) {
							$('#'+elemid).html(data)
						}
					})
				}else{
					beforeNotFinish(p1,p2);
				}
			}
			var numText = 1;
			window.wexp = w;
		})({}, window)
	</script>
	<nav class="navbar navbar-inverse navbar-fixed-top">
		<div class="container-fluid">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle collapsed"
					data-toggle="collapse" data-target="#navbar" aria-expanded="false"
					aria-controls="navbar">
					<span class="sr-only">Toggle navigation</span> <span
						class="icon-bar"></span> <span class="icon-bar"></span> <span
						class="icon-bar"></span>
				</button>
				<a class="navbar-brand"
					href="#">系统演示</a>
			</div>
			<div id="navbar" class="navbar-collapse collapse">
				<ul class="nav navbar-nav navbar-right">
					<li onclick="wexp.showStatusWorkbench()"><a
						href="javascript:void(0)">查看当前进度</a></li>
					<li><a href="../">返回首页</a></li>
				</ul>
			</div>
		</div>
	</nav>
	<div class="container-fluid">
		<div class="row">
			<div class="col-sm-3 col-md-2 sidebar">
				<ul class="nav nav-sidebar">
					<li class="active"><a href="javascript:void(0)">功能介绍</a></li>
					<li><a href="javascript:void(0)">数据采集</a></li>
					<li><a href="javascript:void(0)">文本过滤</a></li>
					<li><a href="javascript:void(0)">文本分词</a></li>
					<li><a href="javascript:void(0)">向量空间模型</a></li>
				</ul>
				<ul class="nav nav-sidebar">
					<li><a href="javascript:void(0)">文本分类</a></li>
					<li><a href="javascript:void(0)">用户兴趣</a></li>
				</ul>
				
				<ul class="nav nav-sidebar">
					<li><a href="javascript:void(0)">微信号数据监控</a></li>
				</ul>
				
				<!-- <div  class="sidebar-footer text-center">
					文本处理 footer
				</div> -->
				<!-- jiang -->
				<footer>
					<p class="sidebar-footer text-center">
						<a href="../sparkol/index.do">进入大数据监控平台</a>
					</p>
					<!--  <p>© 2013 Company, Inc. · <a href="#">Privacy</a> · <a href="#">Terms</a></p> -->
				</footer>
				<!-- jiang -->
			</div>
			<div class="menu menu-current">
				<!-- content div start-->
				<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
					<h1 class="page-header">文本分类综合处理平台</h1>
					<div class="row placeholders">
						<div style="min-height: 200px">
							<h2 align="left">系统说明</h2>
							<div class="h4">
								<p align="left">本系统实现了从网络数据抓取到文本分类模型建立以及用户兴趣空间构建的整个过程。</p>
								<p align="left">（1）页面左侧的目录栏中显示本
									平台展示的六大功能模块，可通过点击相应的项，进入相关功能块的展示页面。</p>
								<p align="left">（2）可通过点击页面上方的“<span class="text-danger">查看当前进度</span>”来显示当前系统的执行阶段。</p>
								<p align="left">
									<strong><code>注意：</code></strong>请务必按照进度总览中各功能块的排列按次序执行！
								</p>
							</div>
							<hr />
							<h2 align="left">平台使用数据说明</h2>
							<div class="h4">
								<p align="left">平台有两种数据来源:</p>
								<p align="left">（1）通过网络爬虫从网页上采集的文本信息。</p>
								<p align="left">（2）数据库中已有的一万条来自微信公众号的微信文本(已完成人工标注类标)。</p>
								<p align="left">在<span class="text-primary">数据采集</span>功能模块中可在网上爬取文本信息并存入数据库中；</p>
								<p align="left">在<span class="text-primary">文本过滤</span>和<span class="text-primary">文本分词</span>功能模块中可使用以上两种数据源进行展示；</p>
								<p align="left">在<span class="text-primary">向量空间模型</span>功能模块使用带类标的微信文本数据作为训练集建立分类模型。</p>
								<p align="left">在<span class="text-primary">文本分类</span>功能模块可对获取的网页文本或微信文本进行类标预测。</p>
						</div>
						</div>
					</div>
				</div>
			</div>
			<div class="menu menu-hidden">
				<!-- content div start-->
				<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
					<h1 class="page-header">数据采集</h1>
					<div class="bs-callout">
						<h3>网页文本获取</h3>
						<div class="h4">
							<p>基于第三方开源的爬虫系统crawler4j完成了从特定搜索引擎或门户网站抓取大量文本数据，
								抓取的内容包括文本标题、正文、时间、作者、来源等。并完成了对抽取到的包含大量HTML标签信息的文本进行数据清洗的功能。</p>
							<p>爬虫系统设置的初始页面为<span class="text-danger">网易新闻首页</span>；爬虫深度为2；抓取页面的最大数目为1000；爬虫间隔时间为1000ms；</p>
						</div>
					</div>
					<section>
						<div class="page-header">获取的网页文本</div>
						<textarea id="crawlertext" class="form-control" rows="" cols=""
							placeholder="获取的网页内容"></textarea>
					</section>
					<p class="text-center ">
						<button type="button" class="btn btn-primary"
							onclick="wexp.crawl('crawlertext',0,0)">抓取网页</button>
						<button type="button" onclick="wexp.cls('crawlertext')"
							class="btn btn-info">清除</button>
					</p>
				</div>
			</div>
			<!-- content div end-->
			<div class="menu menu-hidden">
				<div
					class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main function-filter">
					<h1 class="page-header">文本过滤</h1>
					<div class="bs-callout">
						<h3>文本过滤</h3>
						<div class="h4">
							<p>通过总结文本（主要为微信文本）中噪声类型。 例如重复出现的无意义文本，例如：点击右上角分享到朋友圈。</p>
							<p>系统中有300多个正则表达式来对文本内容进行过滤。</p>
						</div>
					</div>
					<section>
						<div class="page-header">过滤前的文本</div>
						<textarea id="filtertext" class="form-control" rows="" cols=""
							placeholder="请输入要过滤的内容"></textarea>
					</section>
					<p class="text-center ">
						<button type="button" class="btn btn-primary"
							onclick="wexp.crawlData('filtertext',1,0)">获取爬虫数据</button>
						<button type="button" class="btn btn-primary"
							onclick="wexp.getDoc('filtertext',1,0)">获取微信数据</button>
						<button type="button" class="btn btn-success"
							onclick="fil(this,1,1)">过滤</button>
						<button type="button" onclick="wexp.cls('filtertextres')"
							class="btn btn-info">清除</button>
					</p>
					<section>
						<div class="page-header">过滤之后的文本</div>
						<textarea id="filtertextres" class="form-control" rows="" cols=""
							placeholder="这里显示过滤后的内容"></textarea>
					</section>
				</div>
				<script type="text/javascript">
					function fil(btn, p1, p2) {
						if (wexp.checkBefore(p1, p2)) {
							url = "fil.do"
							content = $("#filtertext").val();
							$.ajax({
								type : "post",
								url : url,
								data : {
									"srcText" : content
								},
								success : function(data) {
									var obj = eval('(' + data + ')')
									$("#filtertextres").val(obj.message);
								}
							})
						} else {
							wexp.beforeNotFinish(p1, p2);
						}
					}
				</script>
			</div>
			<div class="menu menu-hidden">
				<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
					<h1 class="page-header">文本分词</h1>
					<div class="bs-callout">
						<h3>文本分词</h3>
						<div class="h4">
							<p>分词的大致流程为：切分关键词,去除停用词,把英文单词转为小写；
								系统对文本切分出的关键词进行词过滤，除了使用停用词表去停用词之外还包括去除切分出来的单个的词。</p>
						</div>
					</div>
					<section>
						<div class="page-header">请输入一段文字</div>
						<textarea class="form-control" id="segtext" rows="" cols=""
							placeholder="请输入要分词的内容"></textarea>
					</section>
					<p class="text-center ">
						
						<button type="button" class="btn btn-primary"
							onclick="wexp.crawlData('segtext',2,0)">获取爬虫数据</button>
						<button type="button" class="btn btn-primary"
							onclick="wexp.getDoc('segtext',2,0)">获取微信数据</button>
						<button type="button" class="btn btn-success"
							onclick="seg(this,2,1)">分词</button>
						<button type="button" onclick="wexp.cls('segtextres')"
							class="btn btn-info">清除</button>
					</p>
					<section>
						<div class="page-header">分词结果: 显示词名和词频</div>
						
						<textarea class="form-control" id="segtextres" rows="" cols=""
							placeholder="这里显示分词后的内容"></textarea>
					</section>
				</div>
				<script type="text/javascript">
					function seg(btn, p1, p2) {
						if (wexp.checkBefore(p1, p2)) {
							url = "seg.do"
							content = $("#segtext").val();
							$.ajax({
								type : "post",
								url : url,
								data : {
									"srcText" : content
								},
								success : function(data) {
									var obj = eval('(' + data + ')')
									var result = "";
									for (o in obj) {
										result += o + ":" + obj[o].freq + "\n";
									}
									$("#segtextres").val(result);
								}
							})
						} else {
							wexp.beforeNotFinish(p1, p2);
						}
					}
				</script>
			</div>
			<div class="menu menu-hidden">
				<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
					<h1 class="page-header">向量空间模型建立</h1>
					<div class="bs-callout">
						<h3>向量空间模型建立</h3>
						<div class="h4">
							<p>模块的主要功能是形成建立分类模型所需的训练集，即建立训练数据的向量空间模型。这一过程主要分为两个部分，分别是特征选择和权重计算，其中特征选择中包含特征向量降维。</p>
							<p>在点“联机处理”按钮后，按钮上方显示的信息是训练集建立向量空间模型时后台打印的日志内容。</p>
							
						</div>
					</div>
					<section>
						<div class="page-header">这里应该获取到数据集的信息并显示到下面</div>
						<!-- rows="" cols=""  placeholder="请输入要分词的内容" -->
						<div class="form-control console" id="TRAIN"></div>
					</section>
					<p class=" text-center exp-btn-group">
						<button type="button" class="btn btn-primary" id="connect"
							onclick="connect(this,'TRAIN',3,0)">联机预处理训练集</button>
						<button id="disconnect" type="button" onclick="disconnect(this)"
							disabled="disabled" class="btn btn-info">中断连接</button>
						<button id="clear" type="button" onclick="wexp.cls('TRAIN')"
							class="btn btn-info">清除</button>
					</p>
					<h1 class="page-header">数据类标显示</h1>
					<div class="bs-callout">
						<h3>数据类标显示</h3>
						<div class="h4">
							<p>
								点击“获取”按钮即可在按钮上方的文本框中显示数据集中文本的所有类标以及对类标的编号，关于数据类标的详细内容参照<a
									target="_blank" href="./indexB.do">标记页面</a>的首页
							</p>
						</div>
					</div>
					<section>
						<div class="page-header">类标展示</div>
						<!-- rows="" cols=""  placeholder="请输入要分词的内容" -->
						<div class="form-control console" id="classconsole"></div>
					</section>
					<p class=" text-center exp-btn-group">
						<button type="button" onclick="getClASS(this,3,1)"
							class="btn btn-primary">查看类标统计</button>
						<button type="button" onclick="wexp.cls('classconsole')"
							class="btn btn-primary">清除</button>
						<script type="text/javascript">
							function getClASS(btn, p1, p2) {
								if (wexp.checkBefore(p1, p2)) {
									var url = "./showTrainCLass.do"
									$.ajax({
										url : url,
										success : function(data) {
											$("#classconsole").html(data);
										}
									})
								} else {
									wexp.beforeNotFinish(p1, p2)
								}
							}
						</script>
					</p>
					<h1 class="page-header">数据集特征词显示</h1>
					<div class="bs-callout">
						<h3>特征词展示</h3>
						<div class="h4">
							<p>点击“获取”按钮即可在按钮上方的文本框中显示对训练集进行特征提取和特征选择之后的所有的特征词以及词的编号。</p>
						</div>
					</div>
					<section>
						<div class="page-header">这里应该获取到数据集的信息并显示到下面</div>
						<!-- rows="" cols=""  placeholder="请输入要分词的内容" -->
						<div class="form-control  console" id="termsconsole"></div>
					</section>
					<p class=" text-center exp-btn-group">
						<button type="button" onclick="getTerms(this,3,2)"
							class="btn btn-primary">查看特征词</button>
						<button type="button" onclick="wexp.cls('termsconsole')"
							class="btn btn-primary">清除</button>
					</p>
					<script type="text/javascript">
						function getTerms(btn, p1, p2) {
							if (wexp.checkBefore(p1, p2)) {
								var url = "./showTrainTerms.do"
								$.ajax({
									url : url,
									success : function(data) {
										$("#termsconsole").html(data);
									}
								})
							} else {
								wexp.beforeNotFinish(p1, p2)
							}

						}
					</script>
					<h1 class="page-header">训练集展示</h1>
					<div class="bs-callout">
						<h3>训练集向量空间模型</h3>
						<div class="h4">
							<p>点击“获取”按钮即可在按钮上方的文本框中显示可用于建立分类模型的训练集。显示的训练集，一行表示一个文档；文档中的内容主要是类标编号
								特征词编号：特征词权重。</p>
						</div>
					</div>
					<section>
						<div class="page-header">这里应该获取到数据集的信息并显示到下面</div>
						<!-- rows="" cols=""  placeholder="请输入要分词的内容" -->
						<div class="form-control console" id="vecsconsole"></div>
					</section>
					<p class=" text-center exp-btn-group">
						<button type="button" onclick="getVecs(this,3,3)"
							class="btn btn-primary">查看训练集向量</button>
						<button type="button" onclick="wexp.cls('vecsconsole')"
							class="btn btn-primary">清除</button>
					</p>
					<script type="text/javascript">
						function getVecs(btn, p1, p2) {
							if (wexp.checkBefore(p1, p2)) {
								var url = "./showTrainFile.do"
								$.ajax({
									url : url,
									success : function(data) {
										$("#vecsconsole").html(data);
									}

								})
							} else {
								wexp.beforeNotFinish(p1, p2);
							}
						}
					</script>
					<!-- <h1 class="page-header">测试集处理</h1>
					<div class="bs-callout">
						<h3>测试集向量空间模型建立</h3>
						<h4>
							<p>这一子模块和训练集空间向量模型大致相同，只是对测试数据的处理不再需要进行特性提取了。测试数据集使用在建立训练数据集的空间向量模型中生成的特征词表。
								在点“联机处理”按钮后，按钮上方显示的信息是对测试集建立向量空间模型时后台打印的日志内容。</p>
							<p>
								使用了html5标准中先进的
								<code>WebSocket</code>
								技术
							</p>
						</h4>
					</div>
					<section>
						<div class="page-header">测试集处理</div>
						rows="" cols=""  placeholder="请输入要分词的内容"
						<div class="form-control console" id="TEST"></div>
					</section>
					<p class=" text-center exp-btn-group">
						<button type="button" onclick="connect(this,'TEST',3,4)"
							class="btn btn-primary">联机预处理</button>
						<button id="" type="button" onclick="disconnect(this)"
							disabled="disabled" class="btn btn-info">中断连接</button>
						<button type="button" onclick="wexp.cls('TEST')"
							class="btn btn-primary">清除</button>
					</p> -->
				</div>
				<script type="text/javascript">
					var ws = null;
					function setConnected(success,btn) {
						if (!success) {
							setBtn($(btn).next())
						}
					}
					function disconnect(btn) {
						setBtn(btn)
						if (ws != null) {
							ws.close();
						}
						ws = null;
					}
					function setBtn(btn) {
						$(btn).siblings("button").removeAttr("disabled");
						$(btn).attr("disabled", "true");
					}
					function connect(btn, message, p1, p2) {
						if (wexp.checkBefore(p1, p2)) {
							setBtn(btn)
							var pos = window.location.pathname.lastIndexOf("/")
							var path = window.location.pathname.substring(0,
									pos)
							var url = 'ws://' + window.location.host + path
									+ "/websocket.do";
							var transports = [];
							ws = (url.indexOf('sockjs') != -1) ? new SockJS(
									url, undefined, {
										protocols_whitelist : transports
									}) : new WebSocket(url);
							ws.onopen = function() {
								setConnected(true);
								log('Info: connection opened.', message);
								ws.send(message)
							};
							ws.onmessage = function(event) {
								log('Received: ' + event.data, message);
							};
							ws.onclose = function(event) {
								//服务器主动关闭会执行这个方法
								if (ws != null) {
									ws.close()
									ws = null
								}
								setConnected(false,btn);
								log('Info: connection closed.', message);
								log(event, message);
							};
						} else {
							wexp.beforeNotFinish(p1, p2);
						}
					}
					function log(message, divId) {
						var console = document.getElementById(divId);
						var p = document.createElement('p');
						p.style.wordWrap = 'break-word';
						p.appendChild(document.createTextNode(message));
						console.appendChild(p);
						console.scrollTop = console.scrollHeight;
					}
				</script>
			</div>
			<div class="menu menu-hidden">
				<div
					class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main function-filter">
					<h1 class="page-header">文本分类过程</h1>
					<div class="bs-callout">
						<h3>数据归一化</h3>
						<div class="h4">
							<p>使用Libsvm中自带的归一化算法，对训练集和测试集的向量空间模型分别进行归一化。</p>
							<p>目的是加快训练速度和提高分类模型准确率。</p>
						</div>
					</div>
					<section>
						<div class="page-header">归一化之后文件:</div>
						<div class="form-control console" id="scale"></div>
						<p class=" text-center exp-btn-group">
							<button type="button" onclick="svm(0,4,0)"
								class="btn btn-primary">显示归一化文件</button>
								<button type="button" onclick="wexp.cls('scale')"
							class="btn btn-primary">清除</button>
						</p>
					</section>
					<div class="bs-callout">
						<h3>建立Libsvm分类器</h3>
						<div class="h4">
							<p>系统使用开源的的分本分类系统LIBSVM，来建立文本分类的分类模型。模块的主要实现分类模型的阶段，即使用归一化后的训练集建立分类模型。这一阶段的输出是一个model.txt文件，通过“模型查看”按钮可在页面显示形成的模型文件。</p>
							<p>模型建立使用参数：SVM类型为C-SVM即多类值分类算法；核函数为线性核函数；不采用缩小启发式。每一个类的惩罚因子都为1。</p>
						</div>
					</div>
					<section>
						<div class="page-header">libsvm分类模型:</div>
						<div class="form-control console" id="model"></div>
						<p class=" text-center exp-btn-group">
							<button type="button" onclick="svm(1,4,1)"
								class="btn btn-primary">模型查看</button>
								<button type="button" onclick="wexp.cls('model')"
							class="btn btn-primary">清除</button>
						</p>
					</section>
					<div class="bs-callout">
						<h3>文本类标预测</h3>
						<div class="h4">
							<p>本模块实现的功能为分使用上一阶段生成的分类模型即model文件对测试数据集中文件的类标进行预测。
								点击“按钮”即可在按钮上方的文本框中显示测试集文本的分类结果。 分类结果按行显示，显示的为类标的编号，对应于测试集中文本的顺序。</p>
						</div>
					</div>
					<section>
						<div class="page-header">测试数据:</div>
						<div class="form-control console" id="predict"></div>
						<p class=" text-center exp-btn-group">
						<button type="button" onclick="wexp.crawlData('predict',4,2)"
								class="btn btn-primary">对爬虫数据分类</button>
								<button type="button" onclick="wexp.getDoc('predict',4,2)"
								class="btn btn-primary">对数据数据分类</button>
						<button type="button" onclick="wexp.classifyText('predictB',4,3)" 
								class="btn btn-primary">获得文本类标</button>
								<button type="button" onclick="wexp.cls('predict')"
							class="btn btn-primary">清除</button>
							<!-- <button type="button" onclick="svm(2,4,2)"
								class="btn btn-primary">交叉验证</button> -->
								<!-- onclick="svm(2,4,2)" -->
						</p>
						<div class="page-header">预测结果:</div>
					    <div class="form-control console" id="predictB"></div>
					</section>
					<script type="text/javascript">
						urls = [ "./showTrainScaleFile.do",
								"./showModelFile.do", "./classify.do" ]
						ids = [ "#scale", "#model", "#predict" ]
						function svm(idx, p1, p2) {
							if ( wexp.checkBefore(p1, p2)) {
								$.ajax({
									url : urls[idx],
									success : function(data) {
										$(ids[idx]).html(data);
									}
								})
							} else {
								wexp.beforeNotFinish(p1, p2)
							}
						}
					</script>


				</div>
			</div>
			<div class="menu menu-hidden">
				<div
					class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main function-filter">
					<h1 class="page-header">用户兴趣分布图</h1>
					<div class="bs-callout">
						<h3>用户兴趣分析</h3>
						<div class="h4">
							<p>
								该模块对存在用户阅读标识的文本。例如微信用户阅读过的微信公众号发布的文本。系统对所有文本进行分类。进而获取用户读取的文本类标，从而形成所有用户的兴趣分布。平台以用户兴趣分布图的形式展示用户阅读的文本类别。
							</p>
						</div>
					</div>
					<section>
						<div class="page-header">过滤前的文本</div>
						<div id="pie" class="figure"></div>
					</section>
				</div>
			</div>
			
				<div class="menu menu-hidden">
				<div
					class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main function-filter">
					<h1 class="page-header">微信号统计数据</h1>
					<div class="bs-callout">
						<h3>微信号数据统计分析</h3>
						<div class="h4">
							<p>
								该模块主要是针对单个公众号进行的数据展示
							</p>
						</div>
					</div>
					<section>
						<div class="page-header">点击量变化趋势图</div>
						<div id="line" class="figure"></div>
						<div id="ratio" class="figure"></div>
						
					</section>
				</div>
			</div>
			
			<!--  XX -->
		</div>
		<script src="//cdn.bootcss.com/sockjs-client/0.3.2/sockjs-min.js"></script>
		<script src="${staticPath}/assets/js/modernizr-latest.js"></script>
		<script src="${staticPath}/js/jQuery-1.9.1.js"></script>
		<script src="${staticPath}/js/bootstrap.min.js"></script>
		<script src="${staticPath}/js/wexp.js"></script>
		<script src="${staticPath}/assets/highcharts/highcharts.js"></script>
		<!-- <script src="http://cdn.hcharts.cn/highmaps/highmaps.js"></script> -->
		
		<script type="text/javascript">
			//$(document).ready(function(){
			$('#pie')
					.highcharts(
							{
								chart : {
									plotBackgroundColor : null,
									plotBorderWidth : null,
									plotShadow : false,
									type : 'pie'
								},
								title : {
									text : '用户标识为[23w456=ASD2e5gaartwersddfdf]兴趣实体空间'
								},
								tooltip : {
									pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
								},
								plotOptions : {
									pie : {
										allowPointSelect : true,
										cursor : 'pointer',
										dataLabels : {
											enabled : true,
											format : '<b>{point.name}</b>: {point.percentage:.1f} %',
											style : {
												color : (Highcharts.theme && Highcharts.theme.contrastTextColor)
														|| 'black'
											}
										}
									}
								},
								series : [ {
									name : '比重',
									colorByPoint : true,
									data : [ {
										name : '政治军事',
										y : 56.33
									}, {
										name : '社会',
										y : 24.03,
										sliced : true,
										selected : true
									}, {
										name : '科技',
										y : 10.38
									}, {
										name : '体育娱乐',
										y : 4.77
									}, {
										name : '财经',
										y : 0.91
									}, {
										name : '其他',
										y : 0.2
									} ]
								} ]
							});

			//})
			
			$(function () {
		    $('#line').highcharts({
		        title: {
		            text: '微信公众号[2tXtfKXX8Dnh2Thra4pQ]阅读变化趋势图',
		            x: -20 //center
		        },
		        subtitle: {
		            text: '来源:Spark大数据分析',
		            x: -20
		        },
		        xAxis: {
		            categories: ['0', '1', '2', '3', '4', '5',
		                         '6', '7', '8', '9', '10', '11','12','13','14','15','16','17','18','19','20','21','22','23']
		        },
		        yAxis: {
		            title: {
		                text: '总阅读量'
		            },
		            plotLines: [{
		                value: 0,
		                width: 1,
		                color: '#808080'
		            }]
		        },
		        tooltip: {
		            valueSuffix: '次'
		        },
		        legend: {
		            layout: 'vertical',
		            align: 'right',
		            verticalAlign: 'middle',
		            borderWidth: 0
		        },
		        series: [{
		        	name: '点击量',
		            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6,7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
		        }]
		    });
		    
		    
		    
		    $('#ratio').highcharts({
				chart : {
					plotBackgroundColor : null,
					plotBorderWidth : null,
					plotShadow : false,
					type : 'pie'
				},
				title : {
					text : '微信公众号[2tXtfKXX8Dnh2Thra4pQ]文章分类图'
				},
				tooltip : {
					pointFormat : '{series.name}: <b>{point.percentage:.1f}%</b>'
				},
				plotOptions : {
					pie : {
						allowPointSelect : true,
						cursor : 'pointer',
						dataLabels : {
							enabled : true,
							format : '<b>{point.name}</b>: {point.percentage:.1f} %',
							style : {
								color : (Highcharts.theme && Highcharts.theme.contrastTextColor)
										|| 'black'
							}
						}
					}
				},
				series : [ {
					name : '比重',
					colorByPoint : true,
					data : [ {
						name : '政治军事',
						y : 56.33
					}, {
						name : '社会',
						y : 24.03,
						sliced : true,
						selected : true
					}, {
						name : '科技',
						y : 10.38
					}, {
						name : '体育娱乐',
						y : 4.77
					}, {
						name : '财经',
						y : 0.91
					}, {
						name : '其他',
						y : 0.2
					} ]
				} ]
			});
		    
		    
		    
		    
		    
		    
		    
});
			
			
			
			
			
		</script>
	</div>
	<%@ include file="baselayout/footer2.jsp"%>
	<!-- Modal -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel">
		<div class="modal-dialog" role="document">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-label="Close">
						<span aria-hidden="true">&times;</span>
					</button>
					<h4 class="modal-title" id="myModalLabel">进度总览</h4>
				</div>
				<div class="modal-body">
					<p>加载中。。。。。</p>
				</div>
				<div class="progress">
					<div class="progress-bar progress-bar-striped active"
						role="progressbar" aria-valuenow="45" aria-valuemin="0"
						aria-valuemax="100" style="width: 1%">
						<span class="sr-only">45% Complete</span>
					</div>
				</div>
				<div class="modal-footer">
					<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
					<!-- <button type="button" class="btn btn-primary">Save changes</button> -->
				</div>
			</div>
		</div>
	</div>
	<div class="modal fade bs-example-modal-lg" id="myTip" tabindex="-1"
		role="dialog" aria-labelledby="mySmallModalLabel">
		<div class="modal-dialog modal-lg">
			<div class="modal-content text-center">TIP</div>
		</div>
	</div>


</body>
</html>